<template>
  <div class="documentary">
    <div class="doc-form">
      <!-- 用户名 -->
      <i-form
        ref="formInline"
        :model="docForm"
        :label-width="70"
        style="width: 94%;"
      >
        <FormItem :label="$t('trade.user')">
          <i-input
            type="text"
            v-model="docForm.user"
            :placeholder="$t('trade.userplac')"
          />
        </FormItem>
        <FormItem :label="$t('trade.contract')">
          <!-- 选择合约 -->
          <i-select
            v-model="docForm.id"
            :placeholder="$t('trade.selectContract')"
          >
            <i-option value="0">{{$t('trade.allContracts')}}</i-option>
            <i-option
              v-for="item in contractlist"
              :value="item.heyue_id"
              :key="item.heyue_id"
            >{{item.heyue_bh}}</i-option>
          </i-select>
          <!-- 倍数手数切换 -->
          <div style="padding: 2px 0;">
            <RadioGroup
              v-model="docForm.type"
              type="button"
              size="small"
            >
              <!-- 倍数 -->
              <i-radio label="0">{{$t('trade.multiple')}}</i-radio>
              <!-- 手数 -->
              <i-radio label="1">{{$t('trade.number')}}</i-radio>
            </RadioGroup>
          </div>
          <!-- 倍数/手数的数量 -->
          <i-select
            v-model="docForm.number"
            :placeholder="$t('login.pchooose')"
          >
            <i-option
              v-for="i in 10"
              :value="i + ''"
              :key="i + 'num'"
            >{{i}}</i-option>
          </i-select>
        </FormItem>
				
				  <!-- 跟DAN方向 -->
				<FormItem :label="$t('trade.lb')">
				
				  <RadioGroup
				    v-model="docForm.lb"
				    size="small"
				  >
				    <!-- 正向 -->
				    <i-radio label="0">{{$t('trade.zheng')}}</i-radio>
				    <!-- 反向 -->
				    <i-radio label="1">{{$t('trade.fan')}}</i-radio>
				  </RadioGroup>
				</FormItem>
				
				
        <!-- 跟操作类别 -->
        <FormItem :label="$t('trade.followUp')">
          <i-select
            v-model="docForm.follow"
            :placeholder="$t('login.pchooose')"
          >
            <!-- 全部操作 -->
            <i-option value="0">{{$t('trade.allOper')}}</i-option>
            <!-- 跟开仓 -->
            <i-option value="15">{{$t('trade.openOper')}}</i-option>
            <!-- 跟平仓 -->
            <i-option value="17">{{$t('trade.closeOper')}}</i-option>
          </i-select>
        </FormItem>
        <FormItem>
          <div style="width: 102px">
            <i-button
              type="primary"
              long
              @click="submitDocumentary"
            >{{$t('trade.documentary')}}</i-button>
          </div>
        </FormItem>
      </i-form>
    </div>
    <!-- 排行榜/跟单记录 -->
    <div class="documentary-list">
      <!-- tab页头部 -->
      <div class="tabs-header">
        <!-- 跟单记录 -->
        <div
          class="tab"
          :class="{'active': tabActive === 2}"
          @click="switchTab(2)"
        >{{$t('trade.docRecord')}}</div>
        <!-- 排行榜 -->
        <!--<div
          class="tab"
          :class="{'active': tabActive === 1}"
          @click="switchTab(1)"
        >{{$t('trade.leaderboard')}}</div>-->
        <div
          class="handle-group"
          v-if="tabActive === 1"
        >
          <i-select
            v-model="showRank"
            :placeholder="$t('login.pchooose')"
            @on-change="sortTr"
            style="width: 200px;"
          >
            <i-option value="1">{{$t('trade.yesT')}}</i-option>
            <i-option value="2">{{$t('trade.lastW')}}</i-option>
            <i-option value="3">{{$t('trade.lastM')}}</i-option>
            <i-option value="4">{{$t('trade.threeM')}}</i-option>
          </i-select>
          <i-select
            v-model="curType"
            :placeholder="$t('login.pchooose')"
            @on-change="sortTr"
            style="width: 200px; margin-right: 12px;"
          >
            <i-option value="1">{{$t('menu.RMB')}}</i-option>
            <i-option value="3">{{$t('menu.USD')}}</i-option>
          </i-select>
          <el-checkbox
            v-model="showLoss"
            @change="sortTr"
          >{{$t('trade.lossT')}}</el-checkbox>
          <div>
            <span
              class="btn mt16"
              @click="getTradeList"
            >{{$t('trade.historyClose')}}</span>
          </div>
        </div>
        <div
          class="handle-group"
          v-if="tabActive === 2"
        >
          <div>
            <!-- 取消当前 -->
            <span
              class="btn mt16"
              :style="{cursor: recordList.length === 0 ? 'not-allowed' : 'pointer'}"
              @click="cancelDocumentary"
            >{{$t('trade.cancelCur')}}</span>
            <!-- 取消全部 -->
            <span
              class="btn"
              :style="{cursor: recordList.length === 0 ? 'not-allowed' : 'pointer'}"
              @click="cancelAll"
            >{{$t('trade.cancelAll')}}</span>
            <!-- 修改 -->
            <span
              class="btn"
              :style="{cursor: recordList.length === 0 ? 'not-allowed' : 'pointer'}"
              @click="modifyRecord"
            >{{$t('trade.modify')}}</span>
          </div>
        </div>
      </div>
      <!-- tab页主体 -->
      <div class="tabs-content">
        <!-- 排行榜 -->
        <div
          class="tab1 tab-body"
          v-show="tabActive === 1"
        >
          <table
            border="0"
            cellspacing="0"
            cellpadding="0"
            class="dTable"
          >
            <thead>
              <tr>
                <!-- 名次 -->
                <th style="width: 116px;">{{$t('order.ranking')}}</th>
                <!-- 用户名 -->
                <th>{{$t('trade.user')}}</th>
                <!-- 币种 -->
                <th>{{$t('capital.currency')}}</th>
                <!-- 盈利 -->
                <th v-if="!showLoss">{{$t('order.profit')}}</th>
                <th v-if="showLoss">{{$t('order.loss')}}</th>
                <!-- 在线状态 -->
                <th>{{$t('order.onlineStatus')}}</th>
              </tr>
            </thead>
            <tbody v-if="showLeaderboard.length === 0">
              <!-- 无数据时展示 -->
              <tr class="noneInfo">
                <td>{{$t('msg.noData')}}</td>
              </tr>
            </tbody>
            <tbody v-else>
              <tr
                v-for="(item, index) in showLeaderboard"
                @click="selectUser(item, index)"
                :class="{active: rankActive === index}"
                :key="item.UserID + index"
              >
                <td style="width: 116px;">{{index + 1}}</td>
                <td>{{item.UserName | filt}}</td>
                <td>{{item.CurText}}</td>
                <td>{{item.ProfitLoss * 1}}</td>
                <td>
                  <span
                    v-if="item.Status === '0'"
                    style="color: #909399;"
                  >离线</span>
                  <span
                    v-if="item.Status === '1'"
                    style="color: rgb(66, 175, 12);"
                  >在线</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <!-- 跟单记录 -->
        <div
          class="tab2 tab-body"
          v-show="tabActive === 2"
        >
          <table
            border="0"
            cellspacing="0"
            cellpadding="0"
            class="dTable"
          >
            <thead>
              <tr>
                <!-- 用户名 -->
                <th>{{$t('trade.user')}}</th>
                <!-- 合约 -->
                <th>{{$t('trade.contract')}}</th>
                <!-- 操作类别 -->
                <th>{{$t('order.operCategory')}}</th>
                <!-- 数量 -->
                <th>{{$t('order.quantity')}}</th>
                <!-- 数量类别 -->
                <th>{{$t('order.quaCategory')}}</th>
                <!-- 跟单方向 -->
                <th>{{$t('order.singDirection')}}</th>
                <!-- 跟单价格 -->
                <th>{{$t('order.docuPrice')}}</th>
              </tr>
            </thead>
            <tbody v-if="recordList.length === 0">
              <!-- 无数据时展示 -->
              <tr class="noneInfo">
                <td>{{$t('msg.noData')}}</td>
              </tr>
            </tbody>
            <tbody v-else>
              <tr
                v-for="(item, index) in recordList"
                :class="{active: recordActive === index}"
                @click="selectRecord(item, index)"
                :key="item.ID"
              >
                <td>{{item.UserName | ShowTail}}</td>
                <td>{{item.ContractID}}</td>
                <td>
                  <span v-if="item.Type === '0'">{{$t('trade.allOper')}}</span>
                  <span v-if="item.Type === '15'">{{$t('trade.openOper')}}</span>
                  <span v-if="item.Type === '17'">{{$t('trade.closeOper')}}</span>
                </td>
                <td>{{item.Quantity}}</td>
                <td>
                  <span v-if="item.AmountType === '0'">{{$t('trade.multiple')}}</span>
                  <span v-if="item.AmountType === '1'">{{$t('trade.number')}}</span>
                </td>
								  <td>{{item.RecordType| lb}}</td>
									  <td>{{item.Multiple | price}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <!-- 修改跟单记录/查看用户交易明细（平仓）弹窗 -->
    <el-dialog
      :visible="recordVisible"
      :width="diaType === 1 ? '480px' : '60vw'"
      :top="diaType === 1 ? '25vh' : '14vh'"
      :append-to-body="true"
      custom-class="documentary-dialog"
      @close="dialogClose"
    >
      <div
        v-if="diaType === 1"
        slot="title"
        class="dialog-title"
      >{{$t('trade.modifyOrder')}}</div>
      <div
        v-else
        slot="title"
        class="dialog-title"
      >{{$t('trade.historyClose')}}</div>
      <!-- 修改跟单记录 -->
      <div
        v-show="diaType === 1"
        class="content-form"
      >
        <i-form
          ref="formInline"
          :model="modifyForm"
          :label-width="70"
        >
          <FormItem :label="$t('trade.user')">
            <div style="text-indent: 2px; font-size: 13px;">{{modifyForm.user}}</div>
          </FormItem>
				
          <FormItem :label="$t('trade.contract')">
            <!-- 选择合约 -->
            <div style="text-indent: 2px; font-size: 13px;">{{modifyForm.id}}</div>
            <!-- 倍数手数切换 -->
            <div style="padding: 2px 0;">
              <RadioGroup
                v-model="modifyForm.type"
                type="button"
                size="small"
              >
                <!-- 倍数 -->
                <i-radio label="0">{{$t('trade.multiple')}}</i-radio>
                <!-- 手数 -->
                <i-radio label="1">{{$t('trade.number')}}</i-radio>
              </RadioGroup>
            </div>
            <!-- 倍数/手数的数量 -->
            <i-select
              v-model="modifyForm.number"
              :placeholder="$t('login.pchooose')"
            >
              <i-option
                v-for="i in 10"
                :value="i + ''"
                :key="i + 'num'"
              >{{i}}</i-option>
            </i-select>
          </FormItem>
					
					<!-- 跟单方向 -->
					<FormItem :label="$t('trade.lb')">
					
					  <RadioGroup
					    v-model="modifyForm.lb"
					    size="small"
					  >
					    <!-- 正向 -->
					    <i-radio label="0">{{$t('trade.zheng')}}</i-radio>
					    <!-- 反向 -->
					    <i-radio label="1">{{$t('trade.fan')}}</i-radio>
					  </RadioGroup>
					</FormItem>
					
          <!-- 跟操作类别 -->
          <FormItem :label="$t('trade.followUp')">
            <i-select
              v-model="modifyForm.follow"
              :placeholder="$t('login.pchooose')"
            >
              <!-- 全部操作 -->
              <i-option value="0">{{$t('trade.allOper')}}</i-option>
              <!-- 跟开仓 -->
              <i-option value="15">{{$t('trade.openOper')}}</i-option>
              <!-- 跟平仓 -->
              <i-option value="17">{{$t('trade.closeOper')}}</i-option>
            </i-select>
          </FormItem>
        </i-form>
      </div>
      <div
        v-show="diaType === 2"
        class="content-table"
      >
        <table
          border="0"
          cellspacing="0"
          cellpadding="0"
          class="dTable"
        >
          <thead>
            <tr>
              <th>{{$t('trade.contract')}}</th>
              <th>{{$t('trade.transition')}}</th>
              <th>{{$t('trade.openAvgPrice')}}</th>
              <th>{{$t('trade.closePrice')}}</th>
              <th>{{$t('trade.closedLot')}}</th>
              <th>{{$t('trade.OGAL')}}</th>
              <th>{{$t('capital.currency')}}</th>
              <th>{{$t('trade.closeTime')}}</th>
              <th>{{$t('trade.dealNo')}}</th>
            </tr>
          </thead>
          <tbody>
            <!-- 无数据时展示 -->
            <tr
              v-if="userTradeList.length === 0"
              class="noneInfo"
            >
              <td>{{hisType === 0 ? $t('msg.noData') : $t('tip.getDateWait')}}</td>
            </tr>
            <!-- 数据列表 -->
            <tr
              v-else
              v-for="item in userTradeList"
              :key="item.CloseId"
            >
              <!-- 合约名称 -->
              <td>
                <div v-if="item.Name">{{item.Name}}</div>
                <div v-else>--</div>
              </td>
              <!-- 买卖 -->
              <td>
                <div v-if="item.Business">{{item.Business}}</div>
                <div v-else>--</div>
              </td>
              <!-- 开仓均价 -->
              <td>
                <div v-if="item.OpeningPrice">{{item.OpeningPrice}}</div>
                <div v-else>--</div>
              </td>
              <!-- 平仓价格 -->
              <td>
                <div v-if="item.ClosingPrice">{{item.ClosingPrice}}</div>
                <div v-else>--</div>
              </td>
              <!-- 平仓手数 -->
              <td>
                <div v-if="item.ClosedLot">{{item.ClosedLot}}</div>
                <div v-else>--</div>
              </td>
              <!-- 平仓盈亏 -->
              <td>
                <div v-if="item.ClosePL">{{item.ClosePL}}</div>
                <div v-else>--</div>
              </td>
              <!-- 币种 -->
              <td>
                <div v-if="item.Currency">{{item.Currency}}</div>
                <div v-else>--</div>
              </td>
              <!-- 委托时间 -->
              <td>
                <div v-if="item.CloseTime">{{item.CloseTime}}</div>
                <div v-else>--</div>
              </td>
              <!-- 平仓成交号 -->
              <td>
                <div v-if="item.CloseNo">{{item.CloseNo}}</div>
                <div v-else>--</div>
              </td>
            </tr>
            <!-- <tr class="statistics" v-if="userTradeList.length !== 0">
              <td>{{$t('trade.total')}}：</td>
              <td colspan="2"></td>
              <td>{{totality3}}</td>
              <td>{{quantity3}}</td>
              <td>{{palnum}}</td>
              <td colspan="3"></td>
            </tr>-->
          </tbody>
        </table>
      </div>
      <div
        v-if="diaType === 1"
        slot="footer"
        class="dialog-footer"
      >
        <!-- 确认 -->
        <button
          class="confirm-btn btn-sure"
          @click.stop="confireDocumentary"
        >
          <span>{{$t('login.confirm')}}</span>
        </button>
        <!-- 取消 -->
        <div
          class="confirm-btn btn-cancel"
          @click.stop="dialogClose"
        >
          <span>{{$t('tip.cancel')}}</span>
        </div>
      </div>
      <div
        v-else
        slot="footer"
        class="dialog-footer"
      >
        <!-- 关闭 -->
        <div
          class="confirm-btn btn-cancel"
          @click.stop="dialogClose"
        >
          <span>{{$t('tip.close')}}</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import { mapGetters } from "vuex";
import {
  Form,
  FormItem,
  Select,
  Option,
  Input,
  Button,
  RadioGroup,
  Radio
} from "iview";
import * as trade from "../../../request/trade";
import { quickSort, throttle } from "../../../utils/auth";
import moment from "moment";
moment.locale("zh-cn");
export default {
  name: "Documentary",
  components: {
    FormItem,
    RadioGroup,
    IForm: Form,
    ISelect: Select,
    IOption: Option,
    IInput: Input,
    IButton: Button,
    IRadio: Radio
  },
  computed: {
    ...mapGetters([
      "contractlist",
      "leaderboard",
      "recordList",
      "userTradeList",
      "hisType"
    ])
  },
	filters:{
		
		filt: function (value) {
		    		if(value){
							    var LEN  = value.length
								
// 							    var xx= value.substring(LEN-3,LEN);
// 									
// 									console.log(value,xx)
// 							    var values = value.replace(xx,"***");
									var values = value.substr(0, LEN-3) + '***';
		    			     return values
		    		}
		　　　　　
		　　　　},
		lb: function (value) {
		    		if(value&&value==1){
							  
		    			      　  return "反向"
		    		}
						if(value&&value==0){
							  
							      　  return "正向"
						}
		　　　　　
		　　　　},
		price: function (value) {
		    		if(value&&value==-1){
							 
		    			 return "市价跟单"
		    		}else{
							
						 return "超价跟单"
		　　　　　}
		　　　　},
		
		
	},
  watch: {
    leaderboard: {
      handler (newVal, oldVal) {
        let that = this;
        if (newVal.length !== 0) {
          // console.log(newVal);
          // 分类筛选
          // 排行期间 1为日、2为周、3为月、4为三个月    排行榜类别  1为盈利 2为亏损
          let dayList = [],
            weekList = [],
            monthList = [],
            threeList = [];
          for (const item of newVal) {
            switch (item.Period) {
              case "1":
                dayList.push(item);
                break;
              case "2":
                weekList.push(item);
                break;
              case "3":
                monthList.push(item);
                break;
              case "4":
                threeList.push(item);
                break;
            }
          }

          // 根据名次排序
          this.dayRanking = quickSort(dayList);
          this.weekRanking = quickSort(weekList);
          this.monthRanking = quickSort(monthList);
          this.threeRanking = quickSort(threeList);
          if (oldVal === undefined) {
            this.sortTr();
          }
        }
      },
      deep: true,
      immediate: true
    },
    recordList: {
      handler (newVal, oldVal) {
			
        // 如果跟单记录列表长度为0，则重置跟单记录选择数据
        if (newVal === undefined || newVal.length === 0) {
          this.recordActive = -1; // 跟单记录选中
          this.recordId = null; // 当前选中的跟单记录ID
          this.recUserId = null; // 当前跟单记录用户id
          this.modifyForm = {
            user: "", // 用户名
            id: "0", // 合约id
            number: "1", // 倍数/手数 数量
            type: "0", // 0倍数1手数
            follow: "0" ,// 跟操作类别：0全部15开仓17平仓
						lb:"1"
          };
        } else {
          this.recordActive = 0;
          let item = newVal[this.recordActive];
					console.log(item)
          this.recordId = item.ID; // 当前选中的跟单记录id
          this.recUserId = item.UserID; // 当前跟单记录用户id
          this.modifyForm = {
            user: item.UserName, // 用户名
            id: item.ContractID, // 合约id
            number: item.Quantity + "", // 倍数/手数 数量
            type: item.AmountType, // 0倍数1手数
            follow: item.Type ,// 跟操作类别：0全部15开仓17平仓
						lb:item.RecordType+""
						
						
          };
        }
      },
      deep: true
    }
  },
  data () {
    return {
      tabActive: 2, // 默认跟单记录
      rankActive: -1, // 当前排行榜选中
      recordActive: -1, // 跟单记录选中
      recordId: null, // 当前选中的跟单记录ID
      recUserId: null, // 当前跟单记录用户id
      showLeaderboard: [], // 当前显示的排行数据
      dayRanking: [], // 日排行
      weekRanking: [], // 周排行
      monthRanking: [], // 月排行
      threeRanking: [], // 三个月排行
      showRank: "1", // 1日排行2周排行3月排行4三个月排行
      showLoss: false, // 是否显示亏损排行 false盈利ture亏损
      curType: "3", // 币种类别：1人民币3美元
      userId: "0", // 当前排行榜选中的用户id
      userCur: "1", // 当前排行榜选中的币种
      docForm: {
        user: "", // 用户名
        id: "0", // 合约id
        number: "1", // 倍数/手数 数量
        type: "0", // 0倍数1手数
        follow: "0" ,// 跟操作类别：0全部15开仓17平仓
				lb:"1"
      },
      hideUname: "", // 隐藏用户名
      modifyForm: {
        user: "", // 用户名
        id: "0", // 合约id
        number: "1", // 倍数/手数 数量
        type: "0", // 0倍数1手数
        follow: "0" ,// 跟操作类别：0全部15开仓17平仓
				lb:"1"
			
      },
      recordVisible: false, // dialog弹窗
      diaType: 1 // 1修改跟单记录2查看用户平仓记录
    };
  },
  methods: {
    switchTab (index) {
      this.tabActive = index;
    },
    // 排行榜变化，重新筛选
    sortTr () {
      let that = this;
      let field = null;
      if (this.showRank === "1") field = "dayRanking";
      if (this.showRank === "2") field = "weekRanking";
      if (this.showRank === "3") field = "monthRanking";
      if (this.showRank === "4") field = "threeRanking";
      let sortArr = []; // 暂存数组
      let plType = this.showLoss ? "2" : "1";
      this[field].forEach(ele => {
        if (ele.Currency === that.curType && ele.Type === plType) {
          sortArr.push(ele);
        }
      });
      this.showLeaderboard = sortArr;

      // 如果选中序号不为-1, 刷新当前筛选完成的选中数据
      if (this.rankActive !== -1) {
        let item = this.showLeaderboard[this.rankActive];
        let nowName = this.$options.filters.ShowTail(item.UserName);
        this.docForm.user = nowName;
        this.hideUname = item.UserName;
        this.userId = item.UserID;
        this.userCur = item.Currency;
      }
    },
    selectUser (item, index) {
      // console.log('当前选中的用户为：', item)
      // let nowName = this.$options.filters.ShowTail(item.UserName);
			var LEN  = item.UserName.length
											
	
												 let nowName = item.UserName.substr(0, LEN-3) + '***';
			console.log(nowName)
      // console.log(nowName)
      this.rankActive = index;
      this.docForm.user = nowName;
      this.hideUname = item.UserName;
      this.userId = item.UserID;
      this.userCur = item.Currency;
      // console.log(this.docForm)
    },
    selectRecord (item, index) {
      this.recordActive = index; // 跟单记录选中
      this.recordId = item.ID; // 当前选中的跟单记录id
      this.recUserId = item.UserID; // 当前跟单记录用户id
      this.modifyForm = {
        user: item.UserName, // 用户名
        id: item.ContractID, // 合约id
        number: item.Quantity + "", // 倍数/手数 数量
        type: item.AmountType, // 0倍数1手数
        follow: item.Type ,// 跟操作类别：0全部15开仓17平仓
				lb:item.RecordType+""  /* 跟单方向*/
				
      };
    },
    // 提交跟单
    submitDocumentary: throttle(function () {
      //  发送（添加）：27;1;跟单ID号;用户ID;合约ID;操作类别;数量;跟单类别;用户编号;超价倍数;数量类别;IP;

      // console.log(this.docForm);
      // 检查用户是否选择了合约
      // if (this.docForm.id === '0') {
      //   this.$store.dispatch("bar/switchAlert", {
      //     msg: this.$t("trade.selectContract"),
      //     type: 2
      //   });
      //   return;
      // }
			 console.log(this.docForm);
      // 操作音效
      if (this.docForm.follow === 0)
        this.$store.dispatch("panel/playTipsAudio", 6);
      if (this.docForm.follow === 15)
        this.$store.dispatch("panel/playTipsAudio", 2);
      if (this.docForm.follow === 17)
        this.$store.dispatch("panel/playTipsAudio", 3);

      this.$store.dispatch("bar/changeLoadings", {
        status: true,
        msg: this.$t("tip.placeWait")
      });
      trade.wsSend(
		
        `27;1;0;${this.userId};${this.docForm.id};${this.docForm.follow};${this.docForm.number};${this.docForm.lb};${this.docForm.user};-1;${this.docForm.type};${this.$store.getters.userip};`
      );
    }, 1000),
    // 修改跟单记录
    modifyRecord () {
      if (this.recordList.length === 0) {
        return;
      }
      this.diaType = 1;
      if (this.recordId === null || this.recordActive === -1) {
        this.$store.dispatch("bar/switchAlert", {
          msg: this.$t("tip.selectRecord"),
          type: 2
        });
      } else {
        this.$store.dispatch("panel/playTipsAudio", 6);
        this.recordVisible = true; // 打开修改跟单记录弹窗
      }
    },
    // 取消跟单
    cancelDocumentary () {
      if (this.recordList.length === 0) {
        return;
      }
      // 发送（取消）：27;3;跟单ID号;IP;
      if (this.recordId === null || this.recordActive === -1) {
        this.$store.dispatch("bar/switchAlert", {
          msg: this.$t("tip.selectRecord"),
          type: 2
        });
      } else {
        this.$store.dispatch("panel/playTipsAudio", 6);
        // 发送取消跟单请求
        this.$store.dispatch("bar/changeLoadings", {
          status: true,
          msg: this.$t("tip.placeWait")
        });
        trade.wsSend(`27;3;${this.recordId};${this.$store.getters.userip};`);
      }
    },
    // 取消全部跟单
    cancelAll () {
      if (this.recordList.length === 0) {
        return;
      }
      // 发送：31;ip;
      this.$store.dispatch("panel/playTipsAudio", 6);
      this.$store.dispatch("bar/changeLoadings", {
        status: true,
        msg: this.$t("tip.placeWait")
      });
      trade.wsSend(`31;${this.$store.getters.userip};`);
    },
    // dialog确认
    confireDocumentary () {
      // console.log(this.modifyForm);
      this.recordVisible = false;
      // 发送（修改）：27;2;跟单ID号;用户ID;合约ID;操作类别;数量;跟单类别;用户编号;超价倍数;数量类别;IP;
      this.$store.dispatch("bar/changeLoadings", {
        status: true,
        msg: this.$t("tip.placeWait")
      });
      trade.wsSend(
        `27;2;${this.recordId};${this.recUserId};${
        this.modifyForm.id === "全部合约" ? "0" : this.modifyForm.id
        };${this.modifyForm.follow};${this.modifyForm.number};${this.modifyForm.lb};${
        this.modifyForm.user
        };-1;${this.modifyForm.type};${this.$store.getters.userip};`
      );
    },
    dialogClose () {
      // 关闭dialog弹窗
      this.recordVisible = false;
    },
    // 历史平仓记录
    getTradeList () {
      if (this.userId === null || this.rankActive === -1) {
        this.$store.dispatch("bar/switchAlert", {
          msg: this.$t("tip.selectUser"),
          type: 2
        });
        return;
      }
      this.diaType = 2;
      // 默认三个月
      var priorTo = moment().subtract(3, "months"); // 三个月前时间
      priorTo = moment(priorTo, "YYYY-MM-DD HH:mm:ss").valueOf(); // 转成时间戳
      priorTo = Math.round(priorTo / 1000).toString();
      let nowDate = Date.parse(new Date()); // 当前时间戳
      nowDate = Math.round(nowDate / 1000).toString(); // 当前时间戳

      this.$store.dispatch("panel/playTipsAudio", 6);
      // 发送：43;用户ID;开始时间;截止时间;币种;
      this.$store.commit("panel/SET_HISTYPE", 1);
      trade.wsSend(`43;${this.userId};${priorTo};${nowDate};${this.userCur};`);
      this.recordVisible = true;
    }
  }
};
</script>

<style lang="scss">
.doc-form {
  .ivu-form {
    .ivu-form-item {
			margin-bottom: 18px;
      .ivu-form-item-label {
        text-align: justify;
        text-align-last: justify;
      }
      .ivu-select .ivu-select-dropdown-list .ivu-select-item:hover {
        background: #57a3f3;
        color: #fff;
      }
    }
  }
}
.documentary-list {
  .tabs-header {
    .handle-group {
      .ivu-date-picker {
        .ivu-date-picker-rel {
          .ivu-input-wrapper {
            .ivu-input-suffix {
              i {
                line-height: 22px;
              }
            }
            .ivu-input {
              height: 22px;
            }
          }
        }
      }
      .ivu-select {
        margin-left: 10px;
        .ivu-select-selection {
          height: 22px;
          .ivu-select-placeholder {
            height: 22px;
            line-height: 22px;
          }
          .ivu-select-selected-value {
            height: 22px;
            line-height: 22px;
          }
        }
      }
      .ivu-input-wrapper {
        margin-left: 10px;
        .ivu-input-icon {
          height: 22px;
          line-height: 22px;
        }
        .ivu-input {
          height: 22px;
        }
      }
    }
  }
}
</style>


<style lang="scss" scoped>
.documentary {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 100%;
  .doc-form {
    position: relative;
    width: 310px;
    height: calc(100% - 4px);
    border: #919b9c 1px solid;
    padding: 16px 8px 4px 4px;
    margin-left: 2px;
  }
  .documentary-list {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding-left: 2px;
  }
}
</style>

